<template>
	<!-- 头部区域 -->
    <el-header>
      <div class="logo">
        <img src="../../../assets/heima.png" alt />
        <!-- <span class="stock">股票管理系统</span> -->
        <h3>股票分析</h3>
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#313642"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <!-- <el-menu-item index="/stock">股票分析</el-menu-item>
        <el-menu-item index="/market">行情分析</el-menu-item>
        <el-menu-item index="/plate">板块指数</el-menu-item> -->
        <!-- <el-menu-item index="/stock">股票</el-menu-item> -->
        <el-submenu index="/stock">
          <template slot="title">股票分析</template>
          <!-- <el-menu-item index="/market/hsindex">沪深指数</el-menu-item> -->
          <el-menu-item index="/stock">股票中心</el-menu-item>
          <el-submenu index="/individualstock">
            <template slot="title">个股分析</template>
            <el-menu-item index="/market/0000001">上证指数</el-menu-item>
            <el-menu-item index="/market/1399001">深圳成指</el-menu-item>
            <el-menu-item index="/market/1399300">沪深300</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="/market">
          <template slot="title">行情分析</template>
          <el-menu-item index="/market">沪深行情</el-menu-item>

          <el-submenu index="/hsmarket">
            <template slot="title">沪深指数</template>
            <el-menu-item index="/hsmarket/main">主要指数</el-menu-item>
            <el-menu-item index="/hsmarket/hushi">沪市指数</el-menu-item>
            <el-menu-item index="/hsmarket/shenshi">深市指数</el-menu-item>
          </el-submenu>
          <el-submenu index="/plate">
            <template slot="title">板块统计</template>
            <el-menu-item index="/plate/industry">行业板块</el-menu-item>
            <el-menu-item index="/plate/concept">概念板块</el-menu-item>
            <el-menu-item index="/plate/area">地域板块</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="/user">个人中心</el-menu-item>

        <!-- <el-submenu index="/uesr">
          <template slot="title">个人中心</template>
          <el-menu-item index="/uesr/info">基本信息</el-menu-item>
          <el-menu-item index="/uesr/mystock">自选股</el-menu-item>
          <el-menu-item index="/...">定制服务</el-menu-item>
        </el-submenu> -->
        <el-menu-item index="/">商务合作</el-menu-item>
        <!-- <el-menu-item index="/test">新闻列表测试</el-menu-item>
        <el-submenu index="/test">
          <template slot="title">Echarts</template>
          <el-menu-item index="/market/0000001">分时图</el-menu-item>
          <el-menu-item index="/k">K线图</el-menu-item>
        </el-submenu> -->
      </el-menu>
      <span class="header-right clearfix" v-if="$store.state.login===0">
        <div class="l_con">
          <a href="http://localhost:8080/#/login" class="lItem">登录</a>
        </div>
        <div class="r_con">
          <a href="http://localhost:8080/#/user/register" class="rItem">注册</a>
        </div>
      </span>
      <span v-else class="clearfix">
        <a href="/user" class="lItem">{{$store.state.account.username}}</a>
        <el-button type="text" @click="logout" style="padding: 10px 10px;fontSize: 14px;" class="rItem">登出</el-button>
      </span>
      <!-- <div class="l_con">
        <a href="/login" class="login">登录</a>
      </div> -->
    </el-header>
</template>

<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      // 登出
      logout(){
        // 清空token
        window.localStorage.clear();
        // 重置Vuex中的登录状态
        this.$store.commit('clearLoginAccount')
        // 在特定页面，如user页，登出后不能再访问，重新会到主页
        if(this.$route.path==="/user" || this.$route.path==="/admin/user"){
          this.$router.push("/home");
        }
        this.$message.success('成功退出')
      }
    }
  }
</script>

<style>
/* .el-container {
  height: 100%;
} */
.el-header {
  /* background-color: #373d41; */
  /* 固定头部，不随滚动条滚动。规定宽高 */
  /* position: fixed; */
  /* flex布局：justify-content定义项目在主轴上的对齐方式；space-between：两旁对顶 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  width:100%;
  height: auto;
  padding-left: 0;
  background-color: #313642;
  font-size: 20px;
  color: #fff;
}
.logo {
  display: flex;
  align-items: center;
}
h3 {
  margin-left: 15px;
}
.header-right {
  display:flex;
  justify-content: space-center;
}
.lItem,.rItem {
  padding: 10px 10px;
  font-size: 14px;
  color: #fff;
}

.l_con {
  z-index: 10;
  width: 70px;
  height: 70px;
  margin-bottom: -6px;
  background-color: #c91a1a;
  line-height: 60px;
  text-align: center;
  box-shadow: 2px 3px 10px #313642;
}
.r_con {
  height: 70px;
  line-height: 60px;
}
.a {
  cursor: pointer;
}
</style>
